<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item> <span class="headerSpan"></span>品牌管理<el-button size="small" icon="el-icon-refresh">刷新</el-button></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableCont">
      <div class="findHeader">
        <div><i class="el-icon-search"></i>筛选查询</div>
        <div>
          <el-button type="text" size="small" :icon="packFindIcon" @click="packFind()">收起筛选</el-button>
          <el-button size="small" @click="getBrandData()">查询结果</el-button>
        </div>
      </div>
      <div class="findCont" v-show="flagShow">输入搜索：<el-input v-model="queryuserInfo.name" placeholder="品牌名称/关键词" /></div>
      <!-- 表格区域 -->
      <el-table style="width: 100%" :data="BrandList">
        <el-table-column>
          <template slot="header">
            <div class="tableHeader">
              <div><i class="el-icon-s-unfold"></i> <span>数据列表</span></div>
              <div class="ringhtHeader">
                <el-button @click="$router.push('/goods/brand/add')">添加</el-button>
                <el-button>生成品牌首字母</el-button>
                <el-pagination :page-sizes="[1, 2, 5, 10]" layout="sizes"> </el-pagination>
                <el-select placeholder="排序方式" v-model="sort" size="mini">
                  <el-option label="升序" value="1"></el-option>
                  <el-option label="降序" value="2"></el-option>
                </el-select>
              </div>
            </div>
          </template>
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="id" label="编号"> </el-table-column>
          <el-table-column prop="name" label="品牌名称"> </el-table-column>
          <el-table-column prop="letter" label="品牌首字母"> </el-table-column>
          <el-table-column label="LOGO">
            <template slot-scope="scope">
              <div>
                <img :src="scope.row.image" alt="" srcset="" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="seq" label="相关">
            <template>
              <div class="correlation">商品:<span>100</span> 评价:<span>1000</span></div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100px">
            <template slot-scope="scope">
              <div class="cz">
                <a href="javascript:;" @click="$router.push('/goods/brand/add?id=' + scope.row.id)">编辑</a>
                <a href="javascript:;" @click="deleteBrand(scope.row.id)">删除</a>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryuserInfo.size"
        :page-size="queryuserInfo.page"
        layout="total,  prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryuserInfo: {
        page: 1,
        size: 10,
        name: '',
        letter: 'V'
      },
      sort: '',
      packFindIcon: 'el-icon-arrow-down',
      flagShow: true,
      BrandList: [],
      total: 10
    }
  },
  methods: {
    packFind() {
      if (this.packFindIcon === 'el-icon-arrow-down') {
        this.packFindIcon = 'el-icon-arrow-up'
        this.flagShow = false
      } else {
        this.packFindIcon = 'el-icon-arrow-down'
        this.flagShow = true
      }
    },
    async getBrandData() {
      const { data: res } = await this.$http.get('/brand/search', this.queryuserInfo)
      console.log(res)
      this.BrandList = res.data.result.data
    },
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryuserInfo.pagesize = newSize
      this.getBrandData()
    },
    handleCurrentChange(newPagenum) {
      this.queryuserInfo.pagenum = newPagenum
      this.getBrandData()
    },
    async deleteBrand(id) {
      const isDel = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      console.log(isDel)
      if (isDel !== 'confirm') {
        return this.$message.info('您取消了删除')
      }
      const { data: res } = await this.$http.delete('/brand', { id: id })
      // console.log(id)

      if (res.result.code !== '200') {
        return
      }
      console.log(res)
      this.$message.success('删除成功')
    }
  },
  created() {
    this.getBrandData()
  }
}
</script>
<style lang="less" scoped>
.findHeader {
  width: 100%;
  height: 50px;
  background-color: #f3f3f3;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
  color: #666666;
  border: 1px solid #eee;
  i {
    line-height: 50px;
    font-size: 16px;
    font-weight: 700;
    margin-right: 10px;
  }
  div {
    line-height: 50px;
    font-size: 12px;
  }
}
.ringhtHeader {
  .el-button {
    height: 30px;
    line-height: 0;
  }
  .el-pagination {
    display: inline-block;
    float: none;
    transform: translateY(-3px);
  }
  .el-select {
    transform: translateY(-2px);
  }
}
.findCont {
  width: 100%;
  height: 70px;
  box-sizing: border-box;
  border: 1px solid #eee;
  line-height: 70px;
  font-size: 14px;
  color: #666;
  padding-left: 40px;
  .el-input {
    display: inline-block;
    width: 200px;
  }
}
.el-table {
  margin-top: 20px;
  .tableHeader {
    display: flex;
    justify-content: space-between;
  }
  .cz {
    a:nth-child(2) {
      padding-left: 20px;
    }
  }
  .correlation {
    span {
      color: #20a5ff;
    }
    span:hover {
      text-decoration: underline;
    }
  }
}
</style>
